<template>
  <div id="airpodsM">
        <!-- 1F -->
    <div class="top">
        <div class="container">
            <span class="title1">AirPods Max</span>
            <span class="title2">概览 &nbsp;&nbsp; 技术规格</span>
        </div>
    </div>
    <hr>
    <!-- 2F -->
    <div class="floor2">
        <span>购买 AirPods Max,Apple Music 免费试听 6 个月⁺。</span>
    </div>
    <!-- 3f -->
    <div class="floor3" v-if="productData">
        <div class="container3">
            <div class="f3i1 left">
                <img class="f3i1" :src="productData.colorSet[2].proImg" v-if="now==-1">
                <img class="f3i1" :src="productData.colorSet[now].proImg" v-else>
                <div class="icon">
                    <div class="icon1">
                        <img src="https://apple1234.obs.cn-north-4.myhuaweicloud.com/sl/icon1.png">
                        <p class="iconp">选择免费送货服务，或者到 Apple Store 零售店提取现货商品。</p>
                    </div>
                    <div class="icon2">
                        <img src="https://apple1234.obs.cn-north-4.myhuaweicloud.com/sl/icon2.jpg">
                        <p>购买 AirPods Max,Apple Music 免费试听 6 个月⁺</p>
                    </div>
                    <div class="icon3">
                        <img src="https://apple1234.obs.cn-north-4.myhuaweicloud.com/sl/icon3.png">
                        <p>简单免费的退货服务</p>
                    </div>
                </div>
                <p class="tp">获得购买帮助， 请致电 400-666-8800。</p>
            </div>
        </div>
        <div class="right">
            <p>购买 AirPods Max</p>
            <span class="sc">颜色</span>
            <div class="cxz">
                <div class="cxz-border" v-for="(pro,i) in productData.colorSet"
                :key="i"
                @click="selectColor(i)"
                :class="{active:now==i}">
                    <img :src="pro.colorImg">
                    <div>{{pro.color}}</div>
                </div>
                <!-- <div class="cxz-border">
                    <img src="https://apple1234.obs.cn-north-4.myhuaweicloud.com/sl/cxz-pink.png">
                    <div>粉色</div>
                </div>
                <div class="cxz-border">
                    <img src="https://apple1234.obs.cn-north-4.myhuaweicloud.com/sl/cxz-silver.png">
                    <div>银色</div>
                </div>
                <div class="cxz-border">
                    <img src="https://apple1234.obs.cn-north-4.myhuaweicloud.com/sl/cxz-green.png">
                    <div>绿色</div>
                </div>
                <div class="cxz-border">
                    <img src="https://apple1234.obs.cn-north-4.myhuaweicloud.com/sl/cxz-blue.png">
                    <div>蓝色</div>
                </div> -->
            </div>
            <div class="rprice">RMB 167/月 (24 期)
                或
                RMB {{productData.price}}
            </div>
            <div >
              <button class="btnbtn" @click="addToShopBag">添加到购物袋</button>
            </div>
        </div>
    </div>
    <!-- 4F banner -->
    <div class="container-b">
        <div>
            <img class="banner" src="https://apple1234.obs.cn-north-4.myhuaweicloud.com/sl/banner.jpg">
        </div>
    </div>
    <!-- 5F 包装内容 -->
    <div class="content" v-if="productData">
        <div>
            <p class="content-p">包装内容</p>
            <img :src="productData.colorSet[2].grallyImg" v-if="now==-1"/>
            <img :src="productData.colorSet[now].grallyImg" v-else/>
            <!-- <img :src=""> -->
        </div>
    </div>
    <!-- 6F jay -->
    <div class="jay">
        <div class="content-jay">
            <div class="jay-left">
                <img class="logo" src="https://apple1234.obs.cn-north-4.myhuaweicloud.com/sl/logo.jpg">
                <div class="logo-p">购买 AirPods Max,Apple Music 免费试听 6 个月⁺。</div>
            </div>
            <div class="jay-right">
                <img class="jayimg" src="https://apple1234.obs.cn-north-4.myhuaweicloud.com/sl/jay.jpg">
            </div>
        </div>
    </div>
    <msg-mask ref="msgMaskbtn" />
  </div>
</template>

<script>
import axios from 'axios';
import MsgMask from '@/components/MsgMask.vue';
  export default {
    components: { MsgMask },
    data() {
      return {
        productData: null,
        userBagData:null,
        now:-1,

        //商品数据项
        img:'',
        title:'',
        price:'',
        num:1,
      }
    },
    methods: {
      getProductData() {
        let url = `http://localhost:3000/product/23`;
        axios.get(url).then(res=>{
          console.log(res.data)
          this.productData = res.data
        })
      },
      selectColor(i){
        this.now = i;
        this.img = this.productData.colorSet[i].proImg;
        this.title = 'AirPods Max ' +  this.productData.colorSet[i].color;
        this.price = this.productData.price;
      },
      addToShopBag() {
            let user = sessionStorage.getItem("user");
            //判断是否选择了商品
            if (this.now < 0) {
                return;
            }
            // 判断是否登录过，否则就直接返回到登录页面
            if (user == "" || !user) {
                this.$refs.msgMaskbtn.setInformation({
                    title: "未登录",
                    // btnTitle:'去登陆',
                    callback() {
                        this.$router.push("/login");
                    },
                });
                this.$refs.msgMaskbtn.showbtnMask();
                return;
            }

            //解析json字符串为js对象
            user = JSON.parse(user);

            //用户信息已经拿到了,接下来是拿到用户购物袋的信息
            let userurl = `http://localhost:3000/shopBagList?userId=${user.id}`;
            axios.get(userurl).then((res) => {
                this.userBagData = res.data;

                let seemProduct = this.checkProductNum(this.title);

                //商品在数据库里的数量如果不等于空
                //就代表着有重复着的数据
                if (seemProduct != null) {
                    let url2 = `http://localhost:3000/shopBagList/${seemProduct.id}`;
                    seemProduct.num += 1;
                    // seemProduct 是重复的商品对象，也就是说其实数据不用更改，直接将之前的数据重写就好了
                    // 另外需要将对象里的num数量+1
                    axios.put(url2, seemProduct).then((res) => {
                        this.$refs.msgMaskbtn.setInformation({
                            title: "添加商品成功",
                        });
                        this.$refs.msgMaskbtn.showbtnMask();
                    });
                } 
                else {
                    //这里是没找到重复商品的操作
                    //正常的添加操作 post
                    let url = `http://localhost:3000/user/${user.id}/shopBagList`;
                    axios
                        .post(url, {
                          title:this.title,
                          price:this.price,
                          img:this.img,
                          num:this.num
                            //post的参数是一个对象，里面只接受四个参数
                        })
                        .then((res) => {
                            this.$refs.msgMaskbtn.setInformation({
                                title: "添加商品成功",
                            });
                            this.$refs.msgMaskbtn.showbtnMask();
                        });
                }
            });
      },
      checkProductNum(proTitle) {
            //检查用户列表下的商品数量
            //返回值 重复的商品对象
            //参数，需要进行检查的商品标题
            for (const e of this.userBagData) {
                if (e.title == proTitle) {
                    return e;
                }
            }
            return null;
      },
    },
    mounted () {
      this.getProductData();
    },
  }
</script>

<style lang="less" scoped>
  #airpodsM{
    width: 100%;
    height: 100%;
  }
</style>
<style scoped>
        * {
            margin: 0;
            padding: 0;
        }
        .active{
            border: 2px solid #0071e3 !important;

        }
        .title1 {
            font-size: 21px;
            font-weight: bold;
            color: #000;
        }

        .title2 {
            font-size: 12px;
            color: #000;
            float: right;
        }

        .top {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            background-color: #fff8ff;
            width: 1024px;
            line-height: 52px;
            height: 52px;
            display: inline-block;
        }

        .floor2 {
            text-align: center;
            background-color: #f5f5f7;
            width: 100%;
            height: 48px;
            font-size: 12px;
            line-height: 48px;
        }

        .floor3 {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .container3 {
            width: 700px;
        }

        .f3i1 {
            width: 450px;
            height: 552px;
        }

        .icon {
            display: flex;
        }

        .icon1 {
            width: 160px;
            height: 65px;
            text-align: center;
            font-size: 12px;
        }

        .icon2 {
            width: 160px;
            height: 65px;
            text-align: center;
            font-size: 12px;
        }

        .icon3 {
            width: 160px;
            height: 65px;
            text-align: center;
            font-size: 12px;
        }

        .tp {
            margin-top: 50px;
            margin-left: 50px;
        }

        .right>p {
            font-size: 40px;
            font-weight: bolder;
            align-items: center;
            margin-bottom: 50px;
        }

        .sc {
            font-size: 17px;
            font-weight: bold;
        }

        .cxz {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            width: 450px;
        }

        .cxz-border {
            width: 100px;
            height: 50px;
            border: 2px solid #d2d2d7;
            border-radius: 20px;
            font-size: 12px;
            color: #1D1D1F;
            text-align: center;
            padding: 40px;
            margin-left: 20px;
            margin-bottom: 20px;
            border-color: #999;
        }

        .cxz-border:hover {
            border-color: #333;
        }

        .cxz-border:active {
            border-color: #3f86e9;
        }


        .cxz-border>img {
            width: 32px;
            height: 32px;
            user-select: none;
        }

        .rprice {
            width: 500px;
            font-size: 22px;
            font-weight: bolder;
            flex-wrap: wrap;
            margin:20px;
            margin-left:40px ;
        }

        .banner {
            width: 1024px;
        }

        .banner:hover {
            width: 1200px;
        }

        .container-b {
            width: 100%;
            text-align: center;
            margin: 50px 0 50px 0;
        }

        .content {
            text-align: center;
        }

        .content-p {
            font-size: 40px;
            font-weight: bolder;
        }

        .jay {
            width: 100%;
            height: 515px;
            margin-top: 10px;
            text-align: center;
            align-items: center;
            background-color: #f5f5f7;
            display: inline-block;
        }

        .content-jay {
            width: 1000px;
            height: 515px;
            display: inline-flex;
            text-align: center;
            align-items: center;
        }

        .logo {
            width: 105px;
            height: 25px;
        }

        .logo-p {
            width: 450px;
            font-size: 48px;
            font-weight: bolder;
            flex-wrap: wrap;
        }

        .jayimg {
            width: 450px;
            height: 500px;
            margin-left: 100px;
        }
        .btnbtn{
             width: 350px;
    height: 36px;
    background-color: #0071e3;
    font-size: 17px;
    color: #fff;
    border: none;
    border-radius: 10px;
    margin-top:20px ;
    margin-left:40px;
        }
</style>